<template>
  <div>
    <!-- 导航栏 -->
    <div class="headerBar_navmenu">
      <el-menu :default-active="'1'" mode="horizontal">
        <el-menu-item index="1" @click="showList = 'createdList'"
          >创建的歌单</el-menu-item
        >
        <el-menu-item index="2" @click="showList = 'subscribedList'"
          >收藏的歌单</el-menu-item
        >
      </el-menu>
    </div>

    <!-- 创建的歌单 -->
    <div class="musicList" v-show="showList == 'createdList'">
      <div
        v-for="list in createdList"
        :key="list.id"
        @click="toSonglistPage(list.id)"
      >
        <el-image
          style="width: 210px; height: 210px"
          :src="list.coverImgUrl"
          fit="fill"
        ></el-image>
        <div class="playCount">
          <i class="el-icon-caret-right"></i>
          {{ list.playCount }}
        </div>
        <div class="play">
          <i class="el-icon-caret-right"></i>
        </div>
        <div class="name">{{ list.name }}</div>
        <div class="trackCount">{{ list.trackCount }}首</div>
      </div>
    </div>

    <!-- 订阅的歌单 -->
    <div class="musicList" v-show="showList == 'subscribedList'">
      <div
        v-for="list in subscribedList"
        :key="list.id"
        @click="toSonglistPage(list.id)"
      >
        <el-image
          style="width: 210px; height: 210px"
          :src="list.coverImgUrl"
          fit="fill"
        ></el-image>
        <div class="playCount">
          <i class="el-icon-caret-right"></i>
          {{ list.playCount }}
        </div>
        <div class="play">
          <i class="el-icon-caret-right"></i>
        </div>
        <div class="name">{{ list.name }}</div>
        <div class="trackCount">{{ list.trackCount }}首</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'userMusicList',
  data() {
    return {
      // 创建的歌单
      createdList: [],
      // 订阅的歌单
      subscribedList: [],
      // 展示的音乐列表
      showList: 'createdList',
    }
  },
  computed: {
    ...mapState(['theDetailUserId']),
  },
  created() {
    this.getPlaylistInfo()
  },
  watch: {
    theDetailUserId: function (newVal, oldVal) {
      this.getPlaylistInfo()
    },
  },
  methods: {
    ...mapMutations(['changePath', 'changeIsActive', 'changeSonglistId']),

    //   获取用户详情
    async getPlaylistInfo() {
      const { data: res } = await this.$http({
        url: `/user/playlist?uid=${this.theDetailUserId}`,
        withCredentials: true, //关键
      })
      // console.log(res)
      this.getPlaylistAboutInfo(res.playlist)
    },
    // 提取歌单相关信息
    getPlaylistAboutInfo(list) {
      let tmepCreatedListDatas = []
      let tmepSubscribedListDatas = []

      list.map((item) => {
        let listObj = {}

        /**
         * 歌单id id
         * 歌单名称 name
         * 歌单播放次数 playCount
         * 歌单歌曲数量 trackCount
         * 歌单图片 coverImgUrl
         */
        listObj.id = item.id
        listObj.name = item.name
        listObj.playCount = item.playCount
        listObj.trackCount = item.trackCount
        listObj.coverImgUrl = item.coverImgUrl

        if (item.subscribed) {
          return tmepSubscribedListDatas.push(listObj)
        } else {
          return tmepCreatedListDatas.push(listObj)
        }
      })

      this.createdList = tmepCreatedListDatas
      this.subscribedList = tmepSubscribedListDatas
      // console.log(this.createdList)
      // console.log(this.subscribedList)
    },
    // 传递 歌单数据，并跳转到歌单页面
    toSonglistPage(songlistId) {
      const info = {
        path: '/view/songlist',
        isActive: songlistId,
        songlistId: songlistId,
      }

      this.changePath(info.path)
      this.changeIsActive(info.isActive)
      this.changeSonglistId(info.songlistId)

      this.$emit('getSonglistId')
    },
  },
}
</script>

<style lang="less" scoped>
.headerBar_navmenu {
  margin-left: 36px;

  /deep/ ul.el-menu {
    border-bottom: 0px;
  }
  /deep/ li.el-menu-item {
    height: 48px;
    font-size: 16px;
  }
  /deep/ li.el-menu-item.is-active {
    font-size: 18px;
    font-weight: 700;
    border-bottom: 3.6px solid red;
  }
}

.musicList {
  display: flex;
  flex-wrap: wrap;
  padding-left: 24px;
  padding-top: 6px;
  > div {
    padding: 12px;
    position: relative;
    cursor: pointer;
    > .el-image {
      border-radius: 6px;
    }
    > .playCount {
      position: absolute;
      right: 16px;
      top: 14px;
      color: white;
    }
    > .play {
      position: absolute;
      right: 22px;
      bottom: 76px;
      border-radius: 50%;
      width: 42px;
      height: 42px;
      background-color: white;
      transition: 1s;
      opacity: 0;
      > .el-icon-caret-right {
        font-size: 38px;
        color: #ec4141;
        position: relative;
        left: 3px;
        top: 2px;
      }
    }
    > .name {
      padding-top: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 180px;
    }
    > .trackCount {
      padding-top: 4px;
      font-size: 14px;
      color: #9f9f9f;
    }
  }
  > div:hover {
    transition: 1s;
    > .play {
      opacity: 1;
    }
  }
}
</style>